<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>

<!--    <script th:replace="common/head::static"></script>-->
<!--    &lt;!&ndash;    <link th:href="@{/common/datatables/css/dataTables.bootstrap.min.css}" rel="stylesheet" type="text/css"/>&ndash;&gt;-->
<!--    <link th:href="@{/common/datatables/css/jquery.dataTables.min.css}" rel="stylesheet" type="text/css"/>-->
<!--    <link th:href="@{/common/select/css/select.dataTables.min.css}" rel="stylesheet" type="text/css"/>-->
<!--    <link th:href="@{/common/Buttons-1.7.0/css/buttons.dataTables.min.css}" rel="stylesheet" type="text/css"/>-->

    <link th:href="@{/ecco/listshow/listshow.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/common/jquery/jquery.js}"></script>
    <script th:src="@{/common/Dialog/dialog.js}"></script>
    <script th:src="@{/common/echarts.js}"></script>

    <link th:href="@{/common/layui-new/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/common/layui/admin.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/common/layui-new/layui/layui.js}"></script>
</head>
<body>
<div class="header">
    <div class="headerleft">
        <h1>Lucene</h1>
        <p>当前选择版本</p>
        <span>3.1.0</span><span>||</span><span>3.2.0</span>
<!--        <input type="button" value="新增版本">-->
    </div>
    <div class="headerright">
        <table lay-skin="nob" class="layui-table">
            <colgroup>
                <col width="200">
                <col width="200">
                <col width="200">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>feature数</th>
                    <th>note数</th>
                    <th>访问数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!--导航栏-->
<div class="navbar">
<!--    <a href="#" id="addfeature">新增feature</a>-->
<!--    <a href="#" class="right">releaes note</a>-->
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space18">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据概览</div>
                <!--                        <div class="layui-card-body">-->
                <!--                            <div id="main" style="width: 100%;height:450px;"></div>-->
                <!--                        </div>-->

                <div class="layui-tab layui-tab-brief layadmin-latestData">
                    <ul class="layui-tab-title">
                        <li class="layui-this">总览图</li>
                        <li>单版本图</li>
                        <li>版本比较图</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="main" style="width: 100%;height:450px;"></div>
                        </div>
                        <div class="layui-tab-item">
                            <button class="layui-btn layui-btn-primary" id="singlexiala">
                                请选择版本
                                <i class="layui-icon layui-icon-down layui-font-12"></i>
                            </button>
                            <div id="single" style="width: 100%;height:450px;"></div>
                        </div>
                        <div class="layui-tab-item">
                            <button class="layui-btn layui-btn-primary" id="comparexiala1">
                                请选择版本1
                                <i class="layui-icon layui-icon-down layui-font-12"></i>
                            </button>
                            compare to
                            <button class="layui-btn layui-btn-primary" id="comparexiala2">
                                请选择版本2
                                <i class="layui-icon layui-icon-down layui-font-12"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-radius" id="yingyong">应用</button>
                            <div id="compare" style="width: 100%;height:450px;"></div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">Note列表</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-data="{url:'/ws/findAll'}" lay-filter="demoEvent">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id', width:80}">ID</th>
                            <th lay-data="{field:'featurename', width:100}">feature</th>
                            <th lay-data="{field:'filename', width:180}">文件名</th>
                            <th lay-data="{field:'noteline'}">所在行</th>
                            <th lay-data="{field:'notecode'，width:200}">code</th>
                            <th lay-data="{field:'notecontent', width:200, event: 'setSign', style:'cursor: pointer;'}">内容</th>

                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">Release列表</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <table class="layui-table" lay-data="{url:'/ws/showRelease'}" lay-filter="demoEvent">-->
<!--                        <thead>-->
<!--                        <tr>-->
<!--                            <th lay-data="{field:'id', width:80}">ID</th>-->
<!--                            <th lay-data="{field:'release', width:100}">name</th>-->
<!--                            <th lay-data="{field:'content', width:500}">content</th>-->
<!--                            <th lay-data="{field:'filename', width:180, templet: '#chakanjava', event: 'showjavalist', style:'color:blue;cursor: pointer;'}">查看相关Java文档</th>-->
<!--                        </tr>-->
<!--                        </thead>-->
<!--                    </table>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">feature概览</div>
                <div class="layui-card-body">
                    <div id="treelist" ></div>
                    <div id="side" style="width: 90%;height:250px;"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">feature管理
                    <button type="button" class="layui-btn layui-btn-primary" onclick="clickbt">原始按钮</button>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="featuretable" lay-filter="featuretable"></table>

                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
                        </div>
                    </script>

                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="chakanjava">
    <a class="layui-table-link">查看</a>
</script>
<script>
    var listtree;
    layui.use(['layer','tree'],function () {
        listtree=layui.tree;
        var fixtree=listtree.render({
            id:'treeId'
            ,elem: '#treelist'  //绑定元素
            ,data: []
            ,onlyIconControl:true
            ,showLine:false
        });
    })


</script>
<script>
    layui.use('dropdown', function(){
        $.ajax({
            url:'http://192.168.56.1:8888/ws/getXiala',
            type:'get',
            dataType: 'JSON',
            contentType: 'application/json',
            success:function (data) {
                var option=[];
                data.data.forEach(function (name) {
                    option.push({title:name});
                })
                var dropdown = layui.dropdown
                dropdown.render({
                    elem: '#singlexiala' //可绑定在任意元素中，此处以上述按钮为例
                    ,data: option
                    ,id: 'demo1'
                    //菜单被点击的事件
                    ,click: function(obj){
                        this.elem.val(obj.title);
                        this.elem.text(obj.title);
                        setGraph('http://192.168.56.1:8888/ws/getSingleAssociation?name='+obj.title,'single');
                    }
                });
                dropdown.render({
                    elem: '#comparexiala1' //可绑定在任意元素中，此处以上述按钮为例
                    ,data: option
                    ,id: 'demo2'
                    //菜单被点击的事件
                    ,click: function(obj){
                        this.elem.val(obj.title);
                        this.elem.text(obj.title);
                    }
                });
                dropdown.render({
                    elem: '#comparexiala2' //可绑定在任意元素中，此处以上述按钮为例
                    ,data: option
                    ,id: 'demo3'
                    //菜单被点击的事件
                    ,click: function(obj){
                        this.elem.val(obj.title);
                        this.elem.text(obj.title);
                    }
                });

            }
        });
    });
    $("#yingyong").bind('click',function () {
        var name1=$("#comparexiala1").val();
        var name2=$("#comparexiala2").val();
        if (name1==""||name2==""||name1==name2){
            alert("请选择正确版本");
        }else {
            setGraph('http://192.168.56.1:8888/ws/getCompareAssociation?name1='+name1+'&name2='+name2,'compare');
        }
    })
</script>

<script type="text/javascript">
    $.ajax({
        url:'http://192.168.56.1:8888/ws/findNum',
        type:'get',
        dataType: 'JSON',
        contentType: 'application/json',
        success:function (data) {
            var chartDom = document.getElementById('side');
            var myChart = echarts.init(chartDom);
            var option;
            var number=[];
            data.data.forEach(function (list) {
                number.push({value:list[0],name:list[1]});
            });

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '所包含note数',
                        type: 'pie',
                        radius: '50%',
                        data: number,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    });
</script>

<script type="text/javascript">
    // var echarts = require('echarts');
    function setGraph(url,name){
        layui.use(['element','tree','layer'], function () {
            var listlayer=layui.layer;
            let element = layui.element;
            var chartDom = document.getElementById(name);
            var myChart = echarts.init(chartDom);
            myChart.off('click');
            var option;

            myChart.showLoading();
            $.getJSON(url, function (graph) {
                myChart.hideLoading();

                graph.nodes.forEach(function (node) {
                    node.label = {
                        show: node.name.indexOf('[')<0
                    };
                });
                option = {
                    tooltip: {},
                    legend: [{
                        // selectedMode: 'single',
                        data: graph.categories.map(function (a) {
                            return a.name;
                        })
                    }],
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [
                        {
                            name: 'Artifact',
                            type: 'graph',
                            layout: 'none',
                            data: graph.nodes,
                            links: graph.links,
                            categories: graph.categories,
                            roam: true,
                            hoverAnimation:false,
                            label: {
                                position: 'right',
                                formatter: '{b}'
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            },
                            emphasis: {
                                focus: 'adjacency',
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                myChart.on('click', {dataType: 'node'}, function (params) {
                    // 关系图的节点被点击时此方法被回调。
                    var data=params.data;
                    top.addTab(data.associationId);
                });
                var methodIndex;
                myChart.on('mouseover',{dataType: 'node'},function (params) {
                    var data=params.data;
                    $.ajax({
                        url: 'http://192.168.56.1:8888/ws/getListShowDetail?uuid='+data.associationId,
                        type: 'get',
                        dataType: 'JSON',
                        contentType: 'application/json',
                        success: function (data) {
                            var jsondata =[];
                            var count=0;
                            data.data.forEach(function (node) {
                                count++;
                                if (node.type==0){
                                    jsondata.push({title:count+'.<a style="color: #009688">'+node.methodname+'</a><a style="color:#c2c2c2;">'+node.classname+'</a>'})
                                    if (node.methodname.includes('clone()')){
                                        console.log('here')
                                    }
                                }else {
                                    jsondata.push({title:count+'.<a style="color: #FF5722">'+node.methodname+'</a><a style="color:#c2c2c2;">'+node.classname+'</a>'})
                                    if (node.methodname.includes('clone()')){
                                        console.log('here')
                                    }
                                }
                            })
                            layui.tree.reload('treeId',{data:jsondata.slice(0,100)});
                            // listlayer.close(methodIndex);
                            methodIndex=listlayer.open({
                                type:1
                                // ,title:'0-100(共'+data.data.length+'项)'
                                ,shade:0
                                ,content:$("#treelist")
                                ,area:['200px','400px']
                                ,moveOut:true
                                ,offset:'r'
                                ,closeBtn: 0
                             });
                            $(".layui-layer-title")[0].innerText='0-100(共'+data.data.length+'项)';
                            // listlayer.title('0-100(共'+data.data.length+'项)',methodIndex);
                        }
                    });

                })
                // myChart.dispatchAction({
                //     type: 'highlight',
                //     seriesIndex: 0,
                //     dataIndex: [1]
                // });
            });
            option && myChart.setOption(option);

        });
    }


    setGraph('http://192.168.56.1:8888/ws/getAssociation','main');

    // setGraph('http://192.168.56.1:8888/ws/getAssociation','compare');

</script>


<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听单元格事件
        table.on('tool(demoEvent)', function(obj){
            var data = obj.data;
            if(obj.event === 'setSign'){
                layer.prompt({
                    formType: 2
                    ,title: '修改 ID 为 ['+ data.id +'] 的内容'
                    ,value: data.sign
                }, function(value, index){
                    layer.close(index);

                    //这里一般是发送修改的Ajax请求

                    //同步更新表格和缓存对应的值
                    obj.update({
                        sign: value
                    });
                });
            }else if (obj.event='showjavalist'){
                top.showJavaList(data.release,data.id);
            }
        });
    });
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#featuretable'
            ,url:'/ws/findFeatureAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [
                    [
                        {field:'id', title:'ID', width:60, fixed: 'left', unresize: true, sort: true}
                        ,{field:'featurename', title:'feature', width:120}
                        ,{field:'createtime', title:'创建时间', width:120}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
                    ]
            ]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(featuretable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var content="<form class=\"layui-form\" action=\"\">\n" +
                        "        <div class=\"layui-form-item\">\n" +
                        "            <label class=\"layui-form-label\">feature</label>\n" +
                        "            <div class=\"layui-input-block\">\n" +
                        "                <input type=\"text\" name=\"title\" required  lay-verify=\"required\" placeholder=\"请输入feature名\" autocomplete=\"off\" class=\"layui-input\">\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "        <div class=\"layui-form-item layui-form-text\">\n" +
                        "            <label class=\"layui-form-label\">feature介绍</label>\n" +
                        "            <div class=\"layui-input-block\">\n" +
                        "                <textarea name=\"desc\" placeholder=\"请输入内容\" class=\"layui-textarea\"></textarea>\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "    </form>";
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        shadeClose: true,
                        skin: 'yourclass',
                        content: content
                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(featuretable)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });
    });
</script>

<script>
    $('#addfeature').on('click', function() {
        var content="<form class=\"layui-form\" action=\"\">\n" +
            "        <div class=\"layui-form-item\">\n" +
            "            <label class=\"layui-form-label\">feature</label>\n" +
            "            <div class=\"layui-input-block\">\n" +
            "                <input type=\"text\" name=\"title\" required  lay-verify=\"required\" placeholder=\"请输入feature名\" autocomplete=\"off\" class=\"layui-input\">\n" +
            "            </div>\n" +
            "        </div>\n" +
            "        <div class=\"layui-form-item layui-form-text\">\n" +
            "            <label class=\"layui-form-label\">feature介绍</label>\n" +
            "            <div class=\"layui-input-block\">\n" +
            "                <textarea name=\"desc\" placeholder=\"请输入内容\" class=\"layui-textarea\"></textarea>\n" +
            "            </div>\n" +
            "        </div>\n" +
            "    </form>";
        var d = dialog({
            title: '新增feature',
            content: content,
            okValue: '保存',
            ok: function() {
                // var that = this;
                // setTimeout(function() {
                //     that.title('提交中..');
                // }, 2000);
                // return true;
            },
            cancelValue: '取消',
            cancel: function() {
            }
        });

        d.show();
    });
</script>
</html>